<template>
  <view class="notice-detail-container">
    <view class="notice-header">
      <view class="notice-icon">
        <uni-icons :type="'paperplane'" size="40" color="#fff" />
      </view>
      <view class="notice-title">{{ notice.title }}</view>
    </view>
    <view class="notice-content">
      <view class="notice-text">{{ notice.content }}</view>
      <view class="notice-date">{{ notice.data }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getNoticeListAPI } from '@/services/notice'
import type { NoticeItem } from '@/types/notice'
import { onLoad } from '@dcloudio/uni-app'


const notice = ref<NoticeItem>({
  id: 0,
  title: '',
  content: '',
  data: '',
  icon: '',
  type: 'other',
  isRead: false
})




// 获取通知详情
const fetchNoticeDetail = async (id: number) => {
  const res = await getNoticeListAPI()
  const foundNotice = res.data.info_list.find((item: { id: number }) => item.id === id)
  if (foundNotice) {
    notice.value = foundNotice
  }
}

onLoad((options) => {
  const noticeId = Number(options?.id || 0)
  fetchNoticeDetail(noticeId)
})
</script>

<style scoped>
.notice-detail-container {
  padding: 20px;
  background-color: #fff;
  height: 100vh;
}

.notice-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.notice-icon {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.notice-title {
  font-size: 20px;
  font-weight: bold;
}

.notice-content {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 10px;
}

.notice-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.notice-date {
  color: #999;
  text-align: right;
  font-size: 14px;
}
</style>
